.LockScreenA21 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;


    .grid {
        height: 230px;
        display: grid;
        grid-template-columns: repeat(20, 1fr);
        grid-column-gap: 14px;
    }

    .line {
        position: relative;
        width: 7px;
        height: 100%;
    }

    .line::before,
    .line::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 7px;
        border-radius: 7px;
        background-color: #3b44d1;
    }

    .line::before {
        animation: first-line ease-in-out 4s var(--delay) infinite alternate;
    }

    .line::after {
        bottom: 0;
        background-color: #dc5245;
        height: calc(100% - 20px);
        animation: second-line ease-in-out 4s var(--delay) infinite alternate;
    }

    .line:nth-child(1) {
        --delay: calc(-0.1s);
    }

    .line:nth-child(2) {
        --delay: calc(-0.2s);
    }

    .line:nth-child(3) {
        --delay: calc(-0.3s);
    }

    .line:nth-child(4) {
        --delay: calc(-0.4s);
    }

    .line:nth-child(5) {
        --delay: calc(-0.5s);
    }

    .line:nth-child(6) {
        --delay: calc(-0.6s);
    }

    .line:nth-child(7) {
        --delay: calc(-0.7s);
    }

    .line:nth-child(8) {
        --delay: calc(-0.8s);
    }

    .line:nth-child(9) {
        --delay: calc(-0.9s);
    }

    .line:nth-child(10) {
        --delay: calc(-1s);
    }

    .line:nth-child(11) {
        --delay: calc(-1.1s);
    }

    .line:nth-child(12) {
        --delay: calc(-1.2s);
    }

    .line:nth-child(13) {
        --delay: calc(-1.3s);
    }

    .line:nth-child(14) {
        --delay: calc(-1.4s);
    }

    .line:nth-child(15) {
        --delay: calc(-1.5s);
    }

    .line:nth-child(16) {
        --delay: calc(-1.6s);
    }

    .line:nth-child(17) {
        --delay: calc(-1.7s);
    }

    .line:nth-child(18) {
        --delay: calc(-1.8s);
    }

    .line:nth-child(19) {
        --delay: calc(-1.9s);
    }

    .line:nth-child(20) {
        --delay: calc(-2s);
    }

    @keyframes first-line {
        50% {
            height: calc(100% - 13px);
        }

        100% {
            background-color: #46f443;
        }
    }

    @keyframes second-line {
        50% {
            height: 7px;
        }

        100% {
            background-color: #5b38ee;
        }
    }

}